<template>
  <section class="article-info">
    <h2 class="mb-1 side-title font-mg font-normal">
      <slot>{{ title }}</slot>
    </h2>
    <ul class="info-list flex flex-wrap">
      <li class="info-item" v-for="(item, index) in list" :key="index">
        <section class="info-item-inner">
          <router-link :to="item.url">
            <p>{{ item.title }}</p>
          </router-link>
        </section>
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const props = defineProps({
  title: {
    type: String as any,
    default: "" as any,
  },
  list: {
    type: Array as any,
    default: [] as any,
  },
});
</script>

<style scoped>
@import "@/assets/css/newsAside.css";
.side-title{
  color:#000;
}
.info-item {
  margin: 0 3px 13px 0;
  width: 75px;
  height: 75px;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #626675;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  user-select: none;
}
.info-item-inner {
  padding: 10px 4px;
  background: #fff;
  text-align: center;
}
.info-item p {
  font-size:14px;
  /* font-weight: bold; */
  color: #626675;
  line-height: 27px;
}
.info-item:nth-child(3) .info-item-inner{
  padding: 10px 6px;
}
.info-item:nth-child(4) .info-item-inner{
  padding: 10px 6px;
}
.info-item:last-child .info-item-inner{
  padding: 10px 6px;
}
.info-item:hover {
  border: 1px solid transparent;
  background-image: linear-gradient(
      to right,
      rgb(255, 255, 255),
      rgb(255, 255, 255)
    ),
    linear-gradient(90deg, rgb(37, 32, 134), rgb(230, 0, 18));
}
.info-item:hover.info-item p {
  background: linear-gradient(90deg, #252086 0%, #e60012 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
